@charset "utf-8";


@import 'mixincommon';
@import 'reset';


$font-size:40px;
@function r($px){
    @return $px/$font-size * 1rem;
}



body{
    width: 100%;
    min-height:100%;
    background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}


.reset{
    display: none;
}



#header{
    width: 100%;
    padding-left: r(25px);
    padding-right: r(25px);
    .header-logo{
        color: $sf;
        font-size: r(22px);
        margin-top: r(40px);
        margin-left: r(15px);
        &:before{
            display: inline-block;
            content: '';
            width: r(160px);
            height: r(40px);
            background-image: url(../img/logo.png);
            background-size: 100%;
            margin-right: r(10px);
            vertical-align: middle;
        }
    }
    .header-title{
        position: relative;
        width: 100%;
        height: r(700px);
        background-image: url(../img/header.png);
        background-size: 100%;
        margin-top: r(20px);
        .text{
            position: absolute;
            top: r(486px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(600px);
            height: r(100px);
            @include borradius(r(50px));
            color: $sf;
            font-size: r(28px);
            font-weight: 500;
            background: linear-gradient(90deg,rgb(253,157,56),rgb(254,99,116));
            padding-top: r(10px);
            text-align: center;
        }
    }
}



section{
    width: 100%;
}
.section-title{
    width: r(458px);
    height: r(134px);
    line-height: r(134px);
    color: $sf;
    font-size: r(38px);
    background-image: url(../img/titlebg1.png);
    background-size: 100%;
    text-align: center;
    margin: 0 auto;
    &.even{
        background-image: url(../img/titlebg2.png);
    }
}


//1.快速发布设计需求
#section-pdemand{
    padding-left: r(20px);
    padding-right: r(20px);
    margin-top: r(40px);
    .formdiv{
        width: 100%;
        @include borradius(r(20px));
        padding: r(22px) r(30px) r(50px);
        background-color: #40a7fe;
    }
    .section-title{
        margin-bottom: r(22px);
    }
    input{
        width: 100%;
        height: r(80px);
        @include borradius(r(10px));
        background-color: $sf;
        padding-left: r(20px);
        padding-right: r(20px);
        color: $s3;
        font-size: r(32px);
        @include inputplace($s9);
        margin-bottom: r(30px);
    }
    .btn-wrapper{
        position: relative;
        height: r(118px);
        line-height: r(118px);
        margin: r(-16px) r(-10px);
        padding: r(16px) r(19px);
        &:after{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            background-image: url(../img/submitbtnbg.png);
            background-size: 100%;
            animation: shake .8s infinite;
        }
    
    }
    @keyframes shake{
        to,form{
            transform: scale(1);
        }
        50%{
            transform: scale(0.99);
        }
    } 
    .submitbtn{
        position: relative;
        display: block;
        width: 100%;
        height: r(80px);
        line-height: r(80px);
        @include borradius(r(10px));
        color: $sf;
        font-size: r(32px);
        text-align: center;
        background-color: #fd9d38;
        z-index: 1;
//      @include box_shadows(0,0,r(8px),r(4px),rgba(255,255,255,.5));
//      animation: shake 2s infinite both;
    }
}



//2.来设计服务流程
#section-flow{
    margin-top: r(152px);
    padding-left: r(73px);
    padding-right: r(73px);
    .section-title{
        margin-bottom: r(52px);
    }
    .flow{
        float: left;
        width: r(302px);
        padding-left: r(66px);
        padding-right: r(66px);
        margin-bottom: r(140px);
    }
    .flow-num{
        position: relative;
        height: r(120px);
        background-size: 100%;
        margin: 0 auto r(26px);
        &:after{
            position: absolute;
            display: block;
            content: '';
            width: r(80px);
            height: r(12px);
            background-image: url(../img/icon-arrow.png);
            background-size: 100%;
        }
    }
    .flow-first{
        width: r(70px);
        background-image: url(../img/flow1.png);
        &:after{
            top: r(70px);
            right: r(-156px);
        }
    }
    .flow-second{
        width: r(82px);
        background-image: url(../img/flow2.png);
        &:after{
            bottom: r(-180px);
            right: r(0px);
            transform: rotate(90deg);
        }
    }
    .flow-third{
        width: r(84px);
        background-image: url(../img/flow3.png);
        &:after{
            top: r(70px);
            right: r(156px);
            transform: rotate(180deg);
        }
    }
    .flow-fouth{
        width: r(94px);
        background-image: url(../img/flow4.png);
        &:after{
            display: none;
        }
    }
    .flow-text{
        color: #1991ff;
        font-size: r(28px);
    }
}



//3.产品设计4大痛点
#section-pain{
    padding-left: r(45px);
    padding-right: r(45px);
    ul{
        margin-top: r(46px);
    }
    .pain-item{
        width: 100%;
        height: r(138px);
        color: $sf;
        font-size: r(32px);
        background-image: url(../img/labelbg.png);
        background-size: 100%;
        margin-bottom: r(20px);
        padding: r(18px) r(60px) r(18px) r(120px);
        &:last-of-type{
            margin-bottom: 0;
        }
    }
}



//4.来设计平台优势
#section-advantange{
    padding-left: r(30px);
    padding-right: r(30px);
    margin-top: r(140px);
    .section-title{
        margin-bottom: r(50px);
    }
    .list-item{
        width: 100%;
        height: r(140px);
        margin-bottom: r(30px);
        padding: r(30px);
        @include borradius(r(10px));
        @include box_shadows(0,0,r(20px),r(3px),rgba(25,145,255,.3));
    }
    .item-icon{
        float: left;
        width: r(80px);
        height: r(80px);
    }
    .item-text{
        float: left;
        margin-left: r(30px);
        h4{
            color: $s3;
            font-size: r(32px);
        }
        p{
            color: $s6;
            font-size: r(24px);
            margin-top: r(4px);
        }
    }
    .icon-first{
        background-image: url(../img/icon-adv1.png);
        background-size: 100%;
    }
    .icon-second{
        background-image: url(../img/icon-adv2.png);
        background-size: 100%;
    }
    .icon-third{
        background-image: url(../img/icon-adv3.png);
        background-size: 100%;
    }
    .icon-fouth{
        background-image: url(../img/icon-adv4.png);
        background-size: 100%;
    }
}




//5.来设计成功案例
#section-case{
    margin-top: r(140px);
    .caselist{
        margin-top: r(50px);
    }
    .list-item{
        width: r(500px);
        height: r(470px);
        @include borradius(r(10px));
        background-color: $sf;
        margin: 0 auto r(50px);
        overflow: hidden;
    }
    .img-wrapper{
        position: relative;
        width: 100%;
        height: r(300px);
        img{
            width: 100%;
        }
        .img-text{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: r(50px);
            line-height: r(50px);
            color: $sf;
            font-size: r(28px);
            text-align: center;
            background-color: rgba(0,0,0,.3);
        }
    }
    .item-text{
        padding: r(30px);
        p{
            color: $s3;
            font-size: r(32px);
        }
        div{
            height: r(60px);
            margin-top: r(8px);
        }
        span{
            color: $s6;
            font-size: r(28px);
            line-height: r(60px);
        }
        .btn{
            display: inline-block;
            width: r(160px);
            height: r(60px);
            line-height: r(60px);
            color: $sf;
            font-size: r(28px);
            text-align: center;
            background-color: #fd9d38;
            @include borradius(r(4px));
        }
    }
}




//6.客户评价
#section-evalate{
    margin-top: r(72px);
    padding-left: r(30px);
    padding-right: r(30px);
    .evalte-text{
        color: $s6;
        font-size: r(32px);
        text-align: center;
        margin-top: r(52px);
        margin-bottom: r(50px);
    }
    .video-wrapper{
        position: relative;
        width: 100%;
        height: r(360px);
        padding: 0 r(22px);
        overflow: hidden;
        &>div{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .playbtn{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            z-index: 1;
            &:after{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                display: block;
                content: '';
                width: r(80px);
                height: r(80px);
                background-image: url(../img/playbtn.png);
                background-size: 100%;
            }
        }
        video{
            width: 100%;
            height: 100%;
        }
    }
    .list{
        position: relative;
        margin-top: r(100px);
        padding-left: r(15px);
        padding-right: r(15px);
        .list-header{
            width: 100%;
            height: r(60px);
            line-height: r(60px);
            color: $sf;
            font-size: r(32px);
            font-weight: bold;
            text-align: center;
            background: linear-gradient(90deg,rgb(253,157,56),rgb(254,99,116));
            @include borradius(r(30px));
            @include box_shadows(0,0,r(20px),r(3px),rgba(25,145,255,.3));
        }
    }
    dl{
        position: relative;
        margin-top: r(50px);
        dt{
            color: $s3;
            font-size: r(32px);
            font-weight: bold;
        }
        .item-num{
            display: inline-block;
            width: r(60px);
            height: r(60px);
            line-height: r(60px);
            @include borradius(50%);
            color: $sf;
            font-size: r(32px);
            margin-right: r(30px);
            background: linear-gradient(90deg,rgb(253,157,56),rgb(254,99,116));
            @include box_shadows(0,0,r(20px),r(3px),rgba(25,145,255,.3));
            text-align: center;
        }
        dd{
            color: $s3;
            font-size: r(28px);
            line-height: r(50px);
            padding-left: r(90px);
        }
        &:after{
            position: absolute;
            right: r(60px);
            bottom: r(40px);
            display: block;
            content: '';
            width: r(225px);
            height: r(180px);
        }
    }
    .item-first{
        &:after{
            background-image: url(../img/price2.png);
            background-size:100% ;
        }
    }
    .item-second{
        margin-top: r(30px);
        &:after{
            bottom: r(-40px);
            background-image: url(../img/price1.png);
            background-size:100% ;
        }
    }
    .tel{
        color: $s6;
        font-size: r(32px);
        text-align: center;
        margin-top: r(130px);
        padding-bottom: r(55px);
        a{
            color: $acolor;
        }
    }
}
.pdemand-wrapper{
    position: fixed;
    right: 0;
    bottom: r(120px);
    width: r(148px);
    height: r(158px);
    z-index: 2;
    .pdemandbtn{
        display: block;
        width: 100%;
        height: 100%;
        color: $sf;
        font-size: r(28px);
        font-weight: 500;
        background-image: url(../img/toolbar.png);
        background-repeat:none ;
        background-size: 100%;
        padding-top: r(80px);
        text-align: center;
    }
}






//弹窗
.site-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    padding-left: r(65px);
    padding-right: r(65px);
    z-index: 9;
    .container{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .win-content{
        position: absolute;
        top: 50%;
        left: 50%;
        @include transformt(translateX(-50%) translateY(-50%));
        width: 100%;
        background-color: $sf;
        @include borradius(r(10px));
    }
    .blue{
        color: $acolor;
    }
    .title{
        width: 100%;
        color: $s3;
        font-size: r(28px);
        padding: r(50px);
        border-bottom: 1px solid $borcolor;
        text-align: center;
    }
    .btn{
        display: block;
        width: 100%;
        height: r(100px);
        line-height: r(100px);
        color: $acolor;
        font-size: r(32px);
        text-align: center;
    }
}



.win-success{
    .title{
        text-align: left;
    }
}



.win-case{
    padding-top: r(100px);
    padding-bottom: r(100px);
    .win-content{
        position: relative;
        max-height: 100%;
        padding: r(60px) r(40px);
        overflow: auto;
        img{
            width: 100%;
        }
        p{
            color: $s3;
            font-size: r(28px);
            line-height: r(44px);
            margin-bottom: r(10px);
        }
    }
    .closebtn{
        position: absolute;
        top: r(-70px);
        right: 0;
        display: block;
        content: '';
        width: r(48px);
        height: r(48px);
        background-image: url(../img/icon-close.png);
        background-size: 100%;
    }
}
